<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>提示</title>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
        (function (doc, win) {
            // document.addEventListener('touchmove', function (e) {
            //   e.preventDefault();
            // });
            var docEl = doc.documentElement,
                // orientationchange 事件 用来监听手机屏幕的反转
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth; //(window.innerWidth);UC 或者QQ 安卓4.0 以下原生浏览器下面是没有
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            //DOMContentLoaded dom 加载完成，onload 有什么区别 dom css js OK 才执行的
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        .body {
            width: 100%;
            height: 100%;
            /*background: aqua;*/
        }
        .popup-header{
            width: 100%;
            position: relative;
            text-align: center;
            color: #ffffff;
            background: cadetblue;
        }
        .popup-header img{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #ffffff;
        }
        @media (max-width: 768px) {
            .popup-header{
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.4rem;
            }
            .popup-header i{
                font-size: 0.3rem;
            }
            .popup{
                width: 7.5rem;
                height: 100%;
                background:#ffffff;
            }
            .popup-main{
                width: 100%;
                height: 100%;
                padding: 0.5rem;
            }
            .popup-title{
                width: 100%;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.28rem;
                color: #222222;
            }
            .popup-content{
                width: 100%;
                padding: 0.2rem 0.1rem;
                border: 1px solid #cccccc;
            }
            .popup-item{
                margin-bottom: 0.5rem;
                font-size: 0.26rem;
                color: #222222;
            }
            .popup-riod{
                margin-top: 0.2rem;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items:center;
            }
            .popup-riod input{
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.2rem;
            }
            .popup-riod div{
                font-size: 0.26rem;
                color: #222222;

            }
            .popup-riod div span{
                font-size: 0.26rem;
                color: cadetblue;
                text-decoration:underline
            }
            .popup-but{
                height: 0.8rem;
                line-height:0.8rem;
                width: 100%;
                background: cadetblue;
                color: #ffffff;
                font-size: 0.4rem;
                text-align: center;
                margin: 0.5rem auto;
            }

        }
        @media (min-width: 768px) {
            .popup-header{
                height: 80px;
                line-height: 80px;
                font-size: 40px;
            }
            .popup-header i{
                font-size: 30px;
            }
            .popup{
                width: 750px;
                height: 100%;
                background:#ffffff;
                margin: 0 auto;
            }
            .popup-main{
                width: 100%;
                height: 100%;
                padding: 50px;
            }
            .popup-title{
                width: 100%;
                height: 80px;
                line-height: 80px;
                font-size: 28px;
                color: #222222;
            }
            .popup-content{
                width: 100%;
                padding: 20px 10px;
                border: 1px solid #cccccc;
            }
            .popup-item{
                margin-bottom: 50px;
                font-size: 26px;
                color: #222222;
            }
            .popup-riod{
                margin-top:20px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items:center;
            }
            .popup-riod input{
                width: 30px;
                height:30px;
                margin-right: 20px;
            }
            .popup-riod div{
                font-size: 26px;
                color: #222222;

            }
            .popup-riod div span{
                font-size:26px;
                color: cadetblue;
                text-decoration:underline
            }
            .popup-but{
                height: 80px;
                line-height:80px;
                width: 100%;
                background: cadetblue;
                color: #ffffff;
                font-size: 40px;
                text-align: center;
                margin: 50px auto;
            }
        }
    </style>
</head>
<body>
<div class="body">
    <div class="popup">
        <div class="popup-header">
            授权
            <img src="">
            <!--            <i class="iconfont icon-cha"></i>-->
        </div>
        <div class="popup-main">
            <div class="popup-title">获得授权后，获得以下权限和信息</div>
            <div class="popup-content">
                <div class="popup-item">获取您的基础信息（头像、昵称等）</div>
                <div class="popup-item">获取您的CGM认证标识</div>
                <div class="popup-item">您可以在该平台使用币付通进行支付</div>
            </div>
            <div class="popup-riod">
                <input type="checkbox" checked="checked" />
                <div>确定授权代表您同意<span>《用户注册协议》</span></div>
            </div>
            <form method="post" action="/oauth/authorize">
                <input type="hidden" name="user_oauth_approval" value="true">
                <button class="popup-but" type="submit">确认授权</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
